<template>
    <div class="multiple-select-list">
        <div style="width: 100%;position: relative;">
            <el-scrollbar>
                <div class="grid gap-[10px] grid-cols-5 justify-center items-center mt-[10px]">
                    <div class="p-[6px] border-[1px] rounded-[4px] dark:border-[rgba(246,247,251,0.1)] border-[var(--bg-2)] line-clamp-1 break-all"
                        :class="isCheck ? 'cursor-pointer ' + getClass(item) : ''" v-for="item in dataList"
                        @click="checkedValue = item[value]">
                        {{ item[label] }}
                    </div>
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>

<script lang="ts" setup>
const props = defineProps({
    dataList: {
        type: Array<any>,
        default: () => []
    },
    label: {
        type: String,
        default: 'label'
    },
    value: {
        type: String,
        default: 'value'
    },
    modelValue: {
        type: Object,
        default: () => null
    },
    isCheck: {
        type: Boolean,
        default: false
    }
})

const emits = defineEmits(['update:modelValue'])
const checkedValue = ref(null)
watch(() => checkedValue.value, (val) => {
    emits('update:modelValue', val)
})
const getClass = (item) => {
    if (props.modelValue == item[props.value]) {
        return '!border-[var(--el-color-primary)] text-[var(--el-color-primary)]'
    }
}

</script>
<style lang="scss" scoped>
.multiple-select-list {
    width: 100%;
    max-height: 50vh;
    position: relative;
    display: flex;
}

.is-fullscreen {
    .multiple-select-list {
        max-height: 85vh;
    }
}
</style>